<template>
  <div class="main">
    <div class="w detail-wrapper">
      <div class="job-card">
        <ul>
          <li v-for="j in jobList" :key="j.itemId">
            <div class="job-list-top">
              <div class="left">
                <div class="job-title">
                  <div class="C-name">{{ j.jobName }}</div>
                  <span class="c-place">
                    [{{ j.cityName }}·{{ j.areaDistrict }}·{{
                      j.businessDistrict
                    }}]
                  </span>
                </div>
                <div class="job-info">
                  <span>{{ j.salaryDesc }}</span>
                  <a href="#">{{ j.jobExperience }}</a>
                  <a href="#">{{ j.jobDegree }}</a>
                  <i href="#" class="el-icon-s-comment"
                    >{{ j.bossName }}-{{ j.bossTitle }}</i
                  >
                </div>
              </div>
              <div class="right">
                <div class="C-logo">
                  <img :src="j.brandLogo" alt="" />
                </div>
                <div class="C-info">
                  <h3>{{ j.brandName }}</h3>
                  <div clas="C-tag-list">
                    <a href="#">{{ j.brandIndustry }}</a>
                    <a href="#">{{ j.brandStageName }}</a>
                    <a href="#">{{ j.brandScaleName }}</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="job-footer">
              <div>
                <i v-for="(s, index) in j.skills" :key="index">{{ s }}</i>
              </div>
              <div class="welfare">
                <span v-for="(w, index) in j.welfareList" :key="index">
                  {{ w }},
                </span>
              </div>
            </div>
          </li>
        </ul>
        <div style="display: flex; justify-content: center">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="10"
            layout="prev, pager, next"
            :total="100"
            small
          >
          </el-pagination>
        </div>
        <div class="feedback-wrapper">
          <div>
            <h3>对搜索结果是否满意?</h3>
            <ul>
              <li>
                <i></i>
                <span>不满意</span>
              </li>
              <li>
                <i></i>
                <span>一般</span>
              </li>
              <li>
                <i></i>
                <span>满意</span>
              </li>
            </ul>
          </div>
          <div class="feedback-text">
            <textarea
              class="input-text"
              autocomplete="on"
              rows="2"
              placeholder="请填写更多反馈意见…"
            ></textarea>
            <el-button type="success" size="small">提交</el-button>
          </div>
        </div>
      </div>
      <div class="job-side-wrapper">
        <div class="login-card-wrapper">
          <div class="login-card-title">各大行业职位任你选</div>
          <div class="login-card-body">
            <div class="login-side">
              <div class="phone-number el-icon-phone">
                +86 <i class="el-icon-caret-bottom"></i>
              </div>
              <input type="text" placeholder="手机号" />
            </div>
            <div class="login-side">
              <i class="el-icon-s-order"></i>
              <div>
                <input
                  type="text"
                  placeholder="短信验证吗"
                  class="messageInput"
                />
                <a href="#">发送验证码</a>
              </div>
            </div>
            <a href="#" class="btn-login">登录/注册</a>
            <div class="text-tip">
              <label> <input type="checkbox" /> Boss直聘</label>
              <a href="#">《用户协议》</a>
              <a href="#">《隐私政策》</a>
            </div>
          </div>
        </div>
        <div class="complete-resume-wrapper">
          <a href="#">上传简历一键注册</a>
        </div>
        <div class="side-banner-wrapper">
          <a href="#">
            <img
              src="https://img.bosszhipin.com/static/file/2022/wf8r5vlj1y1653961013785.png"
              alt=""
            />
          </a>
        </div>
        <div class="side-banner-wrapper">
          <a href="#">
            <img
              src="https://img.bosszhipin.com/static/file/2022/0yvtgtkdjk1653961014037.png"
              alt=""
            />
          </a>
        </div>
        <div class="side-banner-wrapper">
          <a href="#">
            <img
              src="	https://img.bosszhipin.com/static/file/2022/ne3elze9ld1653961014120.jpg"
              alt=""
            />
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqGetJobList } from '@/api/position'
export default {
  name: 'LDetail',
  data() {
    return {
      page: 1,
      pageSize: 5,
      jobList: [],
    }
  },
  methods: {
    handleSizeChange() {},
    handleCurrentChange() {},
  },
  async mounted() {
    const { zpData } = await reqGetJobList()
    this.jobList = zpData.jobList
  },
}
</script>

<style scoped>
.main {
  margin-top: 20px;
  background: linear-gradient(180deg, #e2eded, #e5ebeb 50%, #e5ebeb);
}
.detail-wrapper {
  padding: 20px 0;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
.job-card {
  width: 864px;
  box-sizing: border-box;
  border-radius: 12px;
}
.job-card ul > li {
  background-color: #fff;
  margin-bottom: 20px;
  border-radius: 8px;
  transition: all 0.2s linear;
}
.job-card > ul > li:hover {
  box-shadow: 0 16px 40px 0 hsl(0deg 0% 60% / 30%);
}
.job-list-top {
  display: flex;
  justify-content: space-between;
  padding: 18px 20px;
}
.job-list-top .left {
  display: flex;
  flex-direction: column;
}
.job-list-top .left .job-title {
  display: flex;
  font-size: 16px;
  font-weight: 500;
  color: #222;
  line-height: 22px;
  padding: 8px 0;
}
.C-name {
  max-width: 172px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.job-info span {
  font-size: 16px;
  font-weight: 500;
  color: #fe574a;
  line-height: 22px;
  margin-right: 15px;
}
.job-info a {
  padding: 2px 8px;
  background: #f8f8f8;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  color: #666;
  line-height: 18px;
  margin-right: 10px;
}
.right {
  width: 50%;
  display: flex;
}
.right .C-logo {
  width: 56px;
  height: 56px;
  margin-right: 10px;
}
.C-logo img {
  width: 100%;
  border-radius: 5px;
}
.C-info {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.C-info h3 {
  font-size: 16px;
  font-weight: 500;
  color: #222;
  line-height: 22px;
}
.C-info a {
  padding: 2px 8px;
  background: #f8f8f8;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  color: #666;
  line-height: 18px;
  margin-right: 10px;
}
.job-footer {
  display: flex;
  justify-content: space-between;
  padding: 15px 24px;
  background: linear-gradient(90deg, #f5fcfc, #fcfbfa);
  border-radius: 0 0 8px 8px;
}
.job-footer i {
  margin-right: 5px;
}
.job-footer .welfare {
  width: 362px;
  font-size: 13px;
  font-weight: 400;
  color: #666;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feedback-wrapper {
  display: flex;
  align-items: flex-end;
  margin-top: 50px;
  background: #fff;
  padding: 20px 24px;
  border-radius: 8px;
}
.feedback-wrapper ul {
  margin-top: 20px;
  display: flex;
}
.feedback-wrapper li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50px;
  margin-right: 10px;
  cursor: pointer;
}
.feedback-wrapper li i {
  display: block;
  width: 50px;
  height: 50px;
  background: url(https://img.bosszhipin.com/static/file/2022/tvosb9m4py1653894418770.png)
    0 0 / auto 50px no-repeat;
}
.feedback-wrapper li:nth-child(1):hover i {
  background-position: -150px 0px;
}
.feedback-wrapper li:nth-child(2):hover i {
  background-position: -200px 0px;
}
.feedback-wrapper li:nth-child(3):hover i {
  background-position: -250px 0px;
}
.feedback-text {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.input-text {
  width: 452px;
  padding: 10px 16px;
  line-height: 20px;
  background: #f8f8f8;
  font-size: 13px;
  border-radius: 4px;
  border-color: #f8f8f8;
  resize: none;
  margin: 0 0 20px 32px;
  cursor: text;
  transition: border 0.2s ease-in-out, background-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
  outline: 0;
}
.input-text:hover {
  border-color: #05d9d6;
}
.login-card-wrapper {
  width: 284px;
  background: url(https://img.bosszhipin.com/static/file/2022/myz8vq8tfh1655797191987.png)
      16px 14px / auto 50px no-repeat,
    linear-gradient(180deg, #00bebd, #00a6a7) hsla(0, 0%, 100%, 0.21);
  border-radius: 14px;
  margin-bottom: 16px;
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}
.login-card-title {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  line-height: 25px;
  padding-top: 20px;
  padding-bottom: 10px;
}
.login-card-body {
  background: linear-gradient(180deg, rgba(245, 252, 252, 0.8), #fcfbfa);
  border-radius: 12px 12px 0 0;
  border: 1px solid #f7fdfd;
  backdrop-filter: blur(7px);
  padding: 15px 18px;
}
.login-side {
  display: flex;
  height: 36px;
  background-color: #fff;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
  align-items: center;
  margin-bottom: 15px;
  border: 1px solid transparent;
  transition: all 0.2s linear;
}
.login-side div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login-side input {
  height: 36px;
  border: none;
  outline: none;
}
.phone-number i {
  color: #ccc;
}
.message > input {
  margin-left: 10px;
}
.messageInput {
  margin-left: 10px;
  width: 50px;
}
.login-side a {
  color: #00a6a7;
}
.login-side:hover {
  border: 1px solid #00a6a7;
}
.login-card-body .btn-login {
  display: block;
  text-align: center;
  background: #00bebd;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  line-height: 21px;
  padding: 7px 0;
  margin-top: 20px;
  transition: all 0.2s linear;
}
.login-card-body .btn-login:hover {
  opacity: 0.8;
}
.text-tip {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  font-size: 12px;
  font-weight: 400;
  color: #666;
  line-height: 17px;
  margin-top: 12px;
}

.complete-resume-wrapper {
  margin-bottom: 16px;
  text-align: center;
  padding: 16px 0;
  border-radius: 12px;
  background: #fff
    url(https://img.bosszhipin.com/static/file/2022/mjwpfwr3ea1653981870782.png)
    0/100% auto no-repeat;
}
.complete-resume-wrapper:hover a {
  opacity: 0.8;
}
.complete-resume-wrapper > a {
  display: block;
  width: 176px;
  height: 34px;
  text-align: center;
  line-height: 34px;
  color: #fff;
  font-weight: 500;
  font-size: 15px;
  margin: 0 auto;
  transition: all 0.2s linear;
  background: linear-gradient(90deg, #05d9d6, #00bebd);
  box-shadow: 0 5px 10px -5px rgb(16 139 140 / 60%);
  border-radius: 8px;
}
.side-banner-wrapper {
  width: 300px;
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
}
.side-banner-wrapper img {
  width: 100%;
}
</style>
